/**
* 试卷分类
**/ 

<template>
  <div>

    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[0] }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[1] }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>{{ title[1] }}</h3>
      </el-header>
      <el-main>
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="试卷分类名称">
            <el-input v-model="formInline.categoryName"
                      placeholder="请输入试卷分类"></el-input>
          </el-form-item>
          <el-form-item label="分类层级">
            <el-select v-model="formInline.grade"
                       placeholder="分类层级">
              <el-option v-for="item in grades"
                         :key="item"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">查询</el-button>
            <el-button type="info"
                       @click="onReset">取消</el-button>
          </el-form-item>
        </el-form>
        <el-button class="btn btn-primary btn-lg"
                   data-toggle="modal"
                   data-target="#myModal"
                   @click="clear">新增试卷分类</el-button>
        <!-- 模态框（Modal） -->
        <div class="modal fade"
             id="myModal"
             tabindex="-1"
             role="dialog"
             aria-labelledby="myModalLabel"
             aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h6 class="modal-title"
                    id="myModalLabel">新增试卷分类</h6>
              </div>
              <el-form :inline="true"
                       :model="formInline2"
                       class="demo-form-inline">
                <el-form-item label="试卷分类名称">
                  <el-input v-model="formInline2.name"
                            placeholder="请输入试卷分类"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                  <div class="block">
                    <el-cascader :options="tableData"
                                 :props="cateListProps"
                                 @change="handlechange"
                                 clearable>
                      <template slot-scope="{ node }">
                        <span>{{node.label}}</span>
                        <span v-if="!node.isLeaf"> ({{ node.children.length }}) </span>
                      </template>
                    </el-cascader>
                  </div>
                </el-form-item>
                <el-form-item label="显示顺序">
                  <el-input v-model="formInline2.order"
                            placeholder="请输入显示顺序"
                            type="number"></el-input>
                </el-form-item>
                <el-form-item label="分类级别">
                  <el-input v-model="formInline2.grade"
                            placeholder="请输入分类级别"></el-input>
                </el-form-item>
              </el-form>
              <div class="modal-footer">
                <button type="button"
                        class="btn btn-default"
                        data-dismiss="modal">取消</button>
                <button type="button"
                        class="btn btn-primary"
                        @click="onAdd">添加</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal -->
        </div>
        <template>
          <el-table ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55">
            </el-table-column>
            <el-table-column label="序号"
                             width="120"
                             prop="id">
              <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="name"
                             label="试卷分类名称"
                             width="120">
            </el-table-column>
            <el-table-column prop="grade"
                             label="分类层级"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="order"
                             label="排序值"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user.username"
                             label="创建人"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="最近修改时间"
                             show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.uptime | dateFormat2}}</template>
            </el-table-column>
            <el-table-column prop="address"
                             label="操作"
                             show-overflow-tooltip>
              <div slot-scope="scope">
                <el-button type="text"
                           @click="onDel(scope.row.id)">删除</el-button>
                <el-button type="text"
                           @click="onAlt(scope.row.id)">修改</el-button>
              </div>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
      <el-footer>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm"
                    @callFather="callFather"></Pagination>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
// 导入组件
// import headerComponent from "./head.vue";
import Pagination from '../../components/Pagination'
import {
  paperCategoryList,
  onAddCategory,
  onDelCategory,
  getGrades,
} from '../../api/paperMG'
// 导出模块
export default {
  // 模块名字
  name: 'template',
  // 模块数据
  data() {
    //数据
    return {
      title: '',
      tableData: [],
      grades: [],
      multipleSelection: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      formInline: {
        page: 1,
        limit: 10,
        categoryName: '',
        grade: '',
      },
      formInline2: {
        name: '',
        fid: '',
        order: '',
        grade: '',
        user: JSON.parse(localStorage.getItem('userdata')).data,
      },
      cateListProps: {
        value: 'id',
        label: 'name',
        children: 'paperCategories',
        checkStrictly: true,
      },
    }
  },
  // 注册组件
  components: {
    // headerComponent
    Pagination,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    onSubmit() {
      this.getdata(this.formInline)
    },
    onReset() {
      ;(this.formInline.grade = ''),
        (this.formInline.categoryName = ''),
        (this.formInline.page = this.pageparm.currentPage),
        this.getdata(this.formInline)
    },
    onAltCategory() {
      console.log('altCategory')
    },
    onAdd() {
      onAddCategory(this.formInline2).then((res) => {
        if (res.data.code == 200) {
          this.clear()
          this.getGrade()
          this.$message({
            type: 'success',
            message: '添加成功',
          })
        }
      })
    },
    onDel(parameter) {
      onDelCategory(parameter).then((res) => {
        if (res.data.code == 200) {
          this.onReset()
          this.$message({
            type: 'success',
            message: '删除成功',
          })
        }
      })
    },
    onAlt(parameter) {
      console.log(parameter)
    },
    clear() {
      ;(this.formInline.grade = '一级'),
        (this.formInline.categoryName = ''),
        (this.formInline.page = 1),
        this.getdata(this.formInline)
    },
    handlechange(value) {
      this.formInline2.fid = value[value.length - 1]
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getdata(parameter) {
      /***
       * 调用接口，渲染试卷分类列表
       */
      paperCategoryList(parameter)
        .then((res) => {
          if (res.data.code != 200) {
            this.$message({
              type: 'info',
              message: res.msg,
            })
          } else {
            this.tableData = this.formatData(res.data.data.list)
            //console.log(this.tableData);
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.data.data.total
          }
        })
        .catch((err) => {
          this.$message.error('获取试卷列表失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 格式化数据，递归将空的children置为undefined
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].paperCategories.length < 1) {
          data[i].paperCategories = undefined
        } else {
          this.formatData(data[i].paperCategories)
        }
      }
      return data
    },
    getGrade() {
      getGrades().then((res) => {
        if (res.data.code == 200) {
          this.grades = res.data.data
        }
      })
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    ;(this.title = this.$route.name.split('/')),
      this.getdata(this.formInline),
      this.getGrade()
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>

// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.user-search {
  margin-top: 20px;
}

.modal-dialog {
  width: 500px;
  widows: 200px;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important;
}
</style>
